<template>
  <!-- 首页 -->
  <div class="index" v-if="active == 0">
    <!-- 搜索框 -->
    <van-search
      shape="round"
      v-model="value"
      placeholder="搜索:目的地/酒店/景点/航班号"
    />
    <!-- 轮播 -->
    <van-swipe
      class="my-swipe"
      :loop="false"
      indicator-color="skyblue"
      @change="onChange"
    >
      <van-swipe-item>
        <!-- 宫格 -->
        <div class="gridMainDiv">
          <van-grid :border="false">
            <div
              :style="{
                backgroundImage: value.color,
                backgroundColor: value.color,
              }"
              v-for="value in gridData"
              class="gridDiv"
            >
              <van-grid-item
                :key="value.id"
                :icon="value.img"
                :text="value.name"
              />
            </div>
          </van-grid>
        </div>
      </van-swipe-item>
      <van-swipe-item :style="{ height: height + 'px' }">
        <!-- 宫格 -->
        <div class="gridMainDiv">
          <van-grid :border="false">
            <div
              :style="{
                backgroundImage: value.color,
                backgroundColor: value.color,
              }"
              v-for="value in gridData"
              class="gridDiv"
            >
              <van-grid-item
                :key="value.id"
                :icon="value.img"
                :text="value.name"
              />
            </div>
            <div
              :style="{
                backgroundImage: value.color,
                backgroundColor: value.color,
              }"
              v-for="value in gridData"
              class="gridDiv"
            >
              <van-grid-item
                :key="value.id"
                :icon="value.img"
                :text="value.name"
              />
            </div>
          </van-grid>
        </div>
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div style="text-align: center">
          <div
            :class="
              active == 0 ? 'swipeIndicatorActive' : 'swipeIndicatorInactive'
            "
          ></div>
          <div
            :class="
              active == 1 ? 'swipeIndicatorActive' : 'swipeIndicatorInactive'
            "
          ></div>
        </div>
      </template>
    </van-swipe>
    <van-row>
      <van-col span="12">
        <!-- 特价直播 -->
        <div class="myDiv">
          <van-row>
            <van-col span="10">
              <van-image
                width="73"
                height="20"
                src="https://images4.c-ctrip.com/target/0zc71120008g0ha4z93C6.png"
              />
            </van-col>
            <van-col span="14" style="text-align: right">
              <van-tag size="medium" color="#ffebe3" text-color="#ff4607"
                >特价好货直播中</van-tag
              >
            </van-col>
          </van-row>
          <div class="swipeDiv">
            <van-swipe
              class="my-swipe1"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item>
                <div class="tag">酒店套餐</div>
                <img
                  class="swipe-img"
                  src="https://images4.c-ctrip.com/target/0AD6s120008wr37y87F82_D_280_280_R5.jpg"
                  alt="酒店"
                />
                <div class="mask">上海豪华游轮一晚</div>
                <div class="price">￥<span>199</span>起</div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="tag">酒店套餐</div>
                <img
                  class="swipe-img"
                  src="https://images4.c-ctrip.com/target/0AD6s120008wr37y87F82_D_280_280_R5.jpg"
                  alt="酒店"
                />
                <div class="mask">上海豪华游轮一晚</div>
                <div class="price">￥<span>199</span>起</div>
              </van-swipe-item>
              <van-swipe-item
                ><div class="tag">酒店套餐</div>
                <img
                  class="swipe-img"
                  src="https://images4.c-ctrip.com/target/0AD6s120008wr37y87F82_D_280_280_R5.jpg"
                  alt="酒店"
                />
                <div class="mask">上海豪华游轮一晚</div>
                <div class="price">￥<span>199</span>起</div></van-swipe-item
              >
              <van-swipe-item>
                <div class="tag">酒店套餐</div>
                <img
                  class="swipe-img"
                  src="https://images4.c-ctrip.com/target/0AD6s120008wr37y87F82_D_280_280_R5.jpg"
                  alt="酒店"
                />
                <div class="mask">上海豪华游轮一晚</div>
                <div class="price">￥<span>199</span>起</div>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <!-- 携程精选榜 -->
        <div class="myDiv">
          <!-- 布局设计2 -->
          <van-row>
            <van-col span="10">
              <van-image
                width="73"
                height="20"
                src="https://images4.c-ctrip.com/target/0zc6g120008g0hcb587E5.png"
              />
            </van-col>
            <van-col span="14" style="text-align: right">
              <van-tag size="medium" color="#fdefd2" text-color="#ae6e15"
                >权威排行榜</van-tag
              >
            </van-col>
          </van-row>
          <van-row class="rank-wrapper">
            <van-col span="12">
              <van-image
                class="rank-image"
                width="90%"
                height="70%"
                src="https://youimg1.c-ctrip.com/target/0100k120009i7aur9747D_R_238_268.jpg"
              />
              <span class="rank-desc">上海周边游玩</span>
            </van-col>
            <van-col span="11" style="margin-left: 1px">
              <van-image
                class="rank-image"
                width="100%"
                height="70%"
                src="https://youimg1.c-ctrip.com/target/0100k120009i7aur9747D_R_238_268.jpg"
              />
              <span class="rank-desc">上海周边游玩</span>
            </van-col>
          </van-row>
        </div>
      </van-col>
    </van-row>
    <div class="footer">
      <img
        class="big-img"
        src="	https://dimg04.c-ctrip.com/images/0zg6z120009hxl5q9CCF7.jpg"
        alt=""
      />
      <div class="btn-wrapper">
        <van-button
          round
          icon="phone-o"
          color="#ffffff"
          style="background-color: #0086f6; margin-right: 10px"
        >
          立即预订
        </van-button>
        <van-button
          icon="phone-o"
          round
          color="#ffffff"
          style="background-color: #f60"
        >
          立即预订
        </van-button>
      </div>
      <!-- 签到 -->
      <img
        class="qiandao"
        src="https://webresource.c-ctrip.com/NFES/html5/1688026760894/_next/serverStatic/img/signin-d.png"
        alt=""
      />
    </div>
  </div>
  <!-- 社区 -->
  <div class="community" v-if="active == 1">
    <!-- van-nav-bar -->
    <van-nav-bar title="" left-text="返回">
      <template #left>
        <van-icon
          name="arrow-left"
          @click="onClickLeft"
          size="21px"
          color="rgb(51,51,51)"
        />
        <div
          @click="onClickToPage"
          style="color: #222222; font-weight: 700; font-size: 15px"
        >
          全球 <van-icon name="arrow-down" size="12px" color="rgb(51,51,51)" />
        </div>
        <!-- 搜索框 -->
        <van-search
          shape="round"
          v-model="value"
          placeholder="搜索:目的地/景点/话题"
        />
      </template>
      <template #right>
        <van-image
          round
          width="21px"
          height="21px"
          src="https://pages.c-ctrip.com/you/lvpai-home-defaultavat.jpg"
        />
      </template>
    </van-nav-bar>
    <van-tabs
      color="#2fcfbb"
      title-active-color="#222222"
      title-inactive-color="#222222"
      v-model:active="tabActive"
    >
      <div class="scroll-wrapper" ref="wrapper">
        <div class="scroll-content">
          <van-tab v-for="(value, index) in tabData" :title="value">
          <div v-if="tabActive == 0" class="myCard" v-for="item in myCardData">
            <van-image height="253.44" :src="item.img" />
            <van-text-ellipsis class="title" rows="2" :content="item.title" />
            <div class="bottom">
              <van-row>
                <van-col span="18">
                  <van-image
                    round
                    width="24"
                    height="24"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                  />
                  <van-text-ellipsis class="username" :content="item.username" />
                </van-col>
                <van-col span="6">
                  <div class="icon">
                    <van-icon size="18" :name="item.userPhoto"></van-icon>
                  </div>
                  <div class="num">{{ item.num }}</div>
                </van-col>
              </van-row>
            </div>
          </div>
        </van-tab>
        </div>
      </div>
    </van-tabs>
    <!-- 发布送积分按钮 -->
    <van-sticky
      class="jifen"
    >
      <van-image
        width="85"
        height="90"
        src="https://pages.c-ctrip.com/you/livestream/lvpai_publish_new_btn.png"
      />
    </van-sticky>

    <!-- 返回头部 -->
    <van-back-top right="15vw" bottom="10vh" />
  </div>
  <div v-if="active == 2">
    <van-nav-bar title="消息" left-text="返回">
      <template #left>
        <van-icon
          name="arrow-left"
          @click="onClickLeft"
          size="21px"
          color="rgb(51,51,51)"
        />
        <div
          @click="onClickLeft"
          style="color: #222222; font-weight: 700; font-size: 15px"
        ></div>
      </template>
    </van-nav-bar>
    <div class="message">
      <div class="top">
        <div class="local-box" v-for="i in 4">
          <img
            src="	https://images4.c-ctrip.com/target/0zc07120008q3qqng006D.png"
            alt=""
          />
          <span>订单出行</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="avatar">
        <img
          src="https://images4.c-ctrip.com/target/0zc20120008yu8aioED4D_C_140_140_Q70.png?proc=autoorient"
          alt=""
        />
      </div>
      <div class="detail">
        <div class="info">
          <div class="name">携程旅行</div>
          <div class="time">2021-07-28 10:00</div>
        </div>
        <div class="content">
          携程全球购：De Beers戴比尔斯香港精品店邀您到店
        </div>
      </div>
    </div>
  </div>
  <div v-if="active == 3">
    <van-nav-bar title="" left-text="返回">
      <template #left>
        <van-icon
          name="arrow-left"
          @click="onClickLeft"
          size="21px"
          color="rgb(51,51,51)"
        />
        <div
          @click="onClickLeft"
          style="color: #222222; font-weight: 700; font-size: 15px"
        >
          返回首页
        </div>
      </template>
    </van-nav-bar>
    <!-- 表单 -->
    <van-form v-if="!isLogin" class="login-form" @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <div v-else>
      <h1>admin, 欢迎您</h1>
    </div>
  </div>
  <!-- 底部导航栏 -->
  <van-tabbar
    v-if="!hidden"
    @change="onTabBarChange"
    inactive-color="#666666"
    v-model="active"
  >
    <!-- --van-tabbar-item-text-color 设置导航栏选中的标签的文字颜色 -->
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="miniprogram-o">社区</van-tabbar-item>
    <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
    <van-tabbar-item icon="contact">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { ref } from "vue";
import { showToast,showNotify } from "vant";
import { onMounted } from "vue";
import BScroll from "better-scroll";
import { watch } from "vue";


onMounted(() => {
  showNotify({
    message: "欢迎来到携程旅行",
    type: 'success'
  })
  initScroll()
})


let scroll = ref(null)
let wrapper = ref(null)
function initScroll() {
  scroll.value = new BScroll(wrapper.value, {
    click: true,
    probeType: 3,
  })
}

// 社区页面的变量以及方法
const myCardData = [
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto:
      "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto:
      "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto:
      "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto:
      "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
  {
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto:
      "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  },
];

const addCardData = () => {
  for(let i = 0; i < 10; i++) {
    myCardData.push({
    img: "https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
    title: "7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
    username: "红豆带你吃喝玩乐",
    userPhoto:
      "https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
    num: "23",
    // 是否点赞
  })
  }
}


const onClickLeft = () => {
  // 返回到首页
  active.value = 0;
  // 显示tabbar
  hidden.value = false;
};
const onClickToPage = () => {
  showToast({
    message: "跳转到全球页",
    position: "top",
  });
};
const tabActive = ref(0);


watch(tabActive, (newVal, oldVal) => {
  if (newVal == 1) {
    initScroll()
  }
})

const tabData = ["发现", "徒步", "避暑", "看海", "玩乐", "酒店", "美食"];
// 首页搜索框
const value = ref("");
// 首页宫格的数组
const gridData = [
  {
    id: "1",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel.png",
    name: "酒店",
    color:
      "-webkit-gradient(linear,left top,left bottom,from(#fa5956),to(#fb8650))",
  },
  {
    id: "2",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/flight.png",
    name: "机票",
    color:
      "-webkit-gradient(linear,left top,left bottom,from(#3c83fa),to(#50b2fa))",
  },
  {
    id: "3",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/train_ticket.png",
    name: "火车票",
    color:
      "-webkit-gradient(linear,left bottom,left top,from(#66a4ff),to(#5e80ff))",
  },
  {
    id: "4",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/vacation.png",
    name: "旅游",
    color:
      "-webkit-gradient(linear,left top,left bottom,from(#2fc3b6),to(#52d9b3))",
  },
  {
    id: "5",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/gs.png",
    name: "攻略",
    color:
      "-webkit-gradient(linear,left bottom,left top,from(#ffa846),color-stop(99%,#ff8939))",
  },
  {
    id: "6",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_inn.png",
    name: "民宿",
    color: "#fff5f1",
  },
  {
    id: "7",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/flight_package.png",
    name: "机+酒",
    color: "#eff9ff",
  },
  {
    id: "8",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/bus_ticket.png",
    name: "汽车",
    color: "#f2f5ff",
  },
  {
    id: "9",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/ticket.png",
    name: "门票",
    color: "#ecfcf8",
  },
  {
    id: "10",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/food.png",
    name: "美食",
    color: "#fff9f2",
  },
  {
    id: "11",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_sale.png",
    name: "特价",
    color: "#fff5f1",
  },
  {
    id: "12",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/airport_transfer.png",
    name: "接送机",
    color: "#eff9ff",
  },
  {
    id: "13",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/car.png",
    name: "租车",
    color: "#f2f5ff",
  },
  {
    id: "14",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/weekend.png",
    name: "周边游",
    color: "#ecfcf8",
  },
  {
    id: "15",
    img: "https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/shop.png",
    name: "购物",
    color: "#fff9f2",
  },
];
// 轮播的高度
const height = ref(184);
// 轮播切换的事件
const onChange = (index) => {
  if (index == 1) {
    // 当轮播切换到第二张的时候，增大轮播高度
    // height：354
    // height.value = 354
    // 184 -> 354 +170
    for (let i = 0; i <= 170; i++) {
      setTimeout(() => {
        height.value++;
      }, 1 * i);
    }
  } else {
    // 当轮播切换到第移张的时候，减小轮播高度
    // height：354
    // height.value = 184
    for (let i = 0; i <= 170; i++) {
      setTimeout(() => {
        height.value--;
      }, 1 * i);
    }
  }
};
// 底部导航栏的变量
const active = ref(0);
const hidden = ref(false);
const username = ref("");
const password = ref("");
const isLogin = ref(false);
const onTabBarChange = (active) => {
  // 当底部导航栏选中 社区、消息、我的时，自动隐藏
  if (active == 0) {
    hidden.value = false;
  } else {
    hidden.value = true;
  }
};
const onSubmit = (values) => {
  console.log("submit", values);
  const { username, password } = values;
  if (username === "admin" && password === "123") {
    // 登录成功
    showNotify({
      message: "登录成功",
      type: 'success'
    })
    // 跳转到首页
    active.value = 0;
    // 显示tabbar
    hidden.value = false;

    isLogin.value = true;
  } else {
    // 登录失败
    showToast({
      message: "用户名或密码错误",
      position: "top",
    });
  }
};
</script>
<style>
.scroll-wrapper {
  position: absolute;
  height: 100vh;
}
.jifen {
  position: fixed;
  right: 50%;
  bottom: 60px;
  width: 100px;
  height: 100px;
  transform: translateX(50%);
  z-index: 9999;
}

:root {
  /* --van-tabbar-item-active-color:hotpink; */
  --van-field-placeholder-text-color: #999999;
  --van-search-input-height: 30px;
  --van-grid-item-content-background: #00000000;
  --van-nav-bar-icon-color: var(--van-field-placeholder-text-color);
}

body {
  background-color: #f4f4f4;
}
.van-swipe-item {
  height: 100%;
  .tag {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    height: 14px;
    line-height: 14px;
    padding: 0 3px;
    background: rgba(51, 51, 51, 0.8);
    border-radius: 6px 0 6px 0;
    font-size: 10px;
    color: #fff;
  }
  .swipe-img {
    width: 100%;
    height: 100px;
    border-radius: 6px;
  }
  .mask {
    position: absolute;
    z-index: 9;
    bottom: 30px;
    left: 0;
    height: 20px;
    line-height: 20px;
    padding: 0 3px;
    border-radius: 0 6px 0 6px;
    font-weight: bolder;
    font-size: 16px;
    color: #fff;
  }
  .price {
    float: left;
    height: 18px;
    line-height: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #f60;
    padding-right: 2px;
  }
}
.footer {
  margin-top: 0px;
  padding: 0 15px;
  .big-img {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    border-radius: 6px;
  }
}
.btn-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  margin-top: 10px;
}
.qiandao {
  position: fixed;
  right: 10px;
  bottom: 60px;
  width: 100px;
  height: 100px;
}
/* 轮播样式 */
</style>
<style lang="less" scoped>
/* 宫格中遍历的元素div */
.gridMainDiv {
  margin: 12px;
  border-radius: 10px;
  overflow: hidden;
}

.gridDiv {
  width: calc(100% / 5);
  display: inline-block;
}

/* :deep(.van-grid){
  } */
:deep(.van-grid-item__content) {
  height: 58px;
}

/* 首页搜索框 */
.index {
  :deep(.van-search__content) {
    border: 1.8px solid #0086f6;
    background: #ffffff;
  }
}

// 社区页样式
.community {
  .myCard {
    display: inline-block;
    width: calc(50% - 15px);
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 6px;
    background-color: #ffffff;
    overflow: hidden;

    .title {
      color: #222222;
      font-size: 14px;
      margin-top: 8px;
      margin-left: 10px;
      // padding-right: 10px;
      width: 178px;
    }

    .bottom {
      margin: 8px 10px 12px 10px;
    }

    .username {
      float: right;
      width: 91.5px;
      height: 24px;
      line-height: 24px;
      color: #333333;
      font-size: 12px;
    }

    .icon {
      float: left;
      padding-top: 3px;
      padding-left: 10px;
    }

    .num {
      color: #222222;
      font-size: 12px;
      float: right;
      height: 24px;
      line-height: 24px;
    }
  }

  :deep(.van-tabs__wrap) {
    margin-bottom: 20px;
  }

  :deep(.van-tab) {
    width: 70px;
  }

  :deep(.van-tab--active) {
    .van-tab__text {
      font-size: 21px;
      font-weight: 400;
    }
  }

  :deep(.van-tab__text) {
    font-size: 16px;
  }

  :deep(.van-search__content) {
    background: #f4f4f4;
  }

  :deep(.van-icon-search) {
    font-size: 14px;
  }

  :deep(.van-search) {
    width: 286px;
  }
}

:deep(#van-search-1-input) {
  font-size: 15px;
}

/* 底部导航栏 */
:deep(.van-tabbar-item--active > .van-tabbar-item__text) {
  color: #666666;
}

/* 轮播图的指示器-公共样式 */
.swipeIndicatorInactive,
.swipeIndicatorActive {
  height: 4px;
  border-radius: 2px;
  display: inline-block;
  margin: 0 2px;
}

/* 轮播图的指示器-未被选中 */
.swipeIndicatorInactive {
  width: 4px;
  background-color: #ccc;
}

/* 轮播图的指示器被选中 */
.swipeIndicatorActive {
  width: 14px;
  background-color: #0086f6;
}

/* 特价直播div */
.myDiv {
  width: calc(100% - 28px);
  display: inline-block;
  height: 148px;
  padding: 8px;
  margin-left: 8px;
  border-radius: 8px;
  background: #fff;

  .left,
  .right {
    // border: 1px solid red;
    // width: calc(50% - 4px);
    height: 20px;
  }

  .left {
    float: left;
    width: 45%;
  }

  .right {
    float: right;
    text-align: right;
    width: 55%;
  }

  :deep(.van-image) {
    border-radius: 6px;
    height: 30px;
  }
  .rank-desc {
    font-size: 12px;
    color: #222222;
    margin-top: 4px;
    margin-left: 4px;
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rank-wrapper {
    align-items: center;
    justify-content: center;
  }
}
</style>

<style lang="less" scoped>
/* 表单样式 */
.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 80%;
}
</style>

<style lang="less" scoped>
// 消息页
.message {
  display: flex;
  justify-content: center;
}
.top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 20vh;
  width: 80%;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px #ccc;

  .local-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
    span {
      font-size: 12px;
      color: #222222;
      margin-top: 5px;
    }
  }
}
.list {
  display: flex;
  height: 80px;
  margin-top: 30px;
  padding: 0 10px;
  background-color: #fff;
  .avatar {
    flex-shrink: 0;
    height: 50px;
    width: 50px;
    margin: 10px auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .detail {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 3px 10px;
    width: 100%;
    overflow: hidden;
    .info {
      display: flex;
      justify-content: space-between;
      .name {
        font-size: 16px;
        color: #222222;
      }
      .time {
        font-size: 12px;
        color: #999999;
      }
    }
    .content {
      font-size: 14px;
      color: #222222;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
